<!DOCTYPE html>
<html lang="zh-CN"> <!-- lang属性定义页面主要语言为简体中文，帮助浏览器/搜索引擎识别语言，属性值用双引号包裹 -->
<head>
  <meta charset="UTF-8"> <!-- 声明字符编码为UTF-8，确保中文等多字符正常显示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配移动设备，使页面自适应屏幕宽度 -->
  <title>城市博物馆 - 探索历史与艺术</title> <!-- 定义网页标题，显示在浏览器标签栏，概括页面核心主题 -->
  <style>
    body { font-family: "Microsoft YaHei", sans-serif; line-height: 1.6; margin: 0; padding: 0; }
    header { background-color: #333; color: white; padding: 20px; }
    nav ul { list-style: none; padding: 0; display: flex; gap: 15px; }
    nav a { color: white; text-decoration: none; }
    nav a:hover { text-decoration: underline; }
    main { max-width: 1200px; margin: 20px auto; padding: 0 20px; display: grid; grid-template-columns: 3fr 1fr; gap: 20px; }
    article { border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 20px; }
    .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin: 20px 0; }
    .gallery figure { margin: 0; }
    .gallery img { width: 100%; height: 150px; object-fit: cover; border-radius: 5px; }
    .gallery figcaption { text-align: center; font-size: 0.9em; color: #666; }
    aside { background-color: #f9f9f9; padding: 15px; border-radius: 5px; }
    footer { background-color: #333; color: white; text-align: center; padding: 20px; margin-top: 30px; }
    .time { color: #666; font-style: italic; }
    .author { font-weight: bold; }
    section h2 { border-bottom: 2px solid #333; padding-bottom: 5px; }
  </style>
</head>
<body>
  <!-- header是HTML5语义标签，定义页面"头部区域"，通常包含网站标题、导航栏等全局信息 -->
  <header>
    <h1>城市博物馆</h1> <!-- 页面核心标题，与header配合明确头部主题 -->
    <!-- nav是HTML5语义标签，定义"导航区域"，专门包裹页面导航链接，语义化区分导航功能 -->
    <nav>
      <ul>
        <!-- 修复空href问题，#表示锚点占位（后续可替换为实际页面链接），移除a标签后多余空格 -->
        <li><a href="#">展览</a></li>
        <li><a href="#events">活动</a></li>
        <li><a href="#collection">馆藏</a></li>
        <li><a href="#about">关于我们</a></li>
      </ul>
    </nav>
  </header>

  <!-- main是HTML5语义标签，定义页面"核心内容区域"，仅包含页面独有的核心信息（排除header/footer/aside等重复内容） -->
  <main>
    <div class="content">
      <!-- section是HTML5语义标签，定义"内容区块"，用于将核心内容按主题拆分（如"当前展览""近期活动"），需搭配标题使用 -->
      <section id="exhibitions">
        <h2>当前展览</h2>

        <!-- article是HTML5语义标签，定义"独立内容块"，表示可单独拆分、不依赖其他内容的单元（如单篇展览介绍、新闻） -->
        <article>
          <h3>古埃及文明展</h3>
          <p class="time">2023年6月10日 - 2023年12月10日</p> <!-- 移除p标签后多余空格，规范格式 -->
          <p>本次展览将展示来自古埃及的珍贵文物，包括法老面具、木乃伊、石刻和日常用品，带您探索4000多年前的神秘文明。</p>

          <div class="gallery">
            <!-- figure是HTML5语义标签，包裹"媒体内容+说明"组合（如图片+figcaption），语义化关联媒体与说明文本 -->
            <figure>
              <!-- 移除img标签前多余空格，alt属性为图片加载失败时的替代文本，提升可访问性 -->
              <img src="https://images.unsplash.com/photo-1585076622618-990098c3151d?q=80&w=1000&auto=format&fit=crop" alt="古埃及法老面具">
              <!-- figcaption是HTML5语义标签，定义figure的"说明文本"，专门用于解释图片/视频等媒体内容 -->
              <figcaption>法老黄金面具</figcaption>
            </figure>
            <figure>
              <img src="https://images.unsplash.com/photo-1574623712297-11924521a42d?q=80&w=1000&auto=format&fit=crop" alt="古埃及石刻">
              <figcaption>神庙石刻</figcaption>
            </figure>
            <figure>
              <img src="https://images.unsplash.com/photo-1569929526995-577377a5420c?q=80&w=1000&auto=format&fit=crop" alt="古埃及文物">
              <figcaption>日常用品</figcaption>
            </figure>
          </div>
        </article>

        <article>
          <h3>现代艺术特展</h3>
          <p class="time">2023年7月15日 - 2023年10月15日</p>
          <p>汇集全球知名现代艺术家作品，探索当代艺术的多元表达形式，包括抽象画、装置艺术和多媒体艺术作品。</p>
        </article>
      </section>

      <section id="events">
        <h2>近期活动</h2>
        <article>
          <h3>专家讲座：埃及金字塔的秘密</h3>
          <p class="time">2023年9月5日 14:00-16:00</p>
          <p class="author">主讲人：张教授（考古学博士）</p>
          <p>本次讲座将深入探讨埃及金字塔的建造技术和历史背景，揭示古埃及文明的伟大成就。</p>
        </article>
      </section>
    </div>

    <!-- aside是HTML5语义标签，定义"侧边栏区域"，包含与核心内容相关但非必需的辅助信息（如参观指南、订阅表单） -->
    <aside>
      <h3>参观信息</h3>
      <p><strong>开放时间：</strong> 9:00-17:00（周一闭馆）</p>
      <p><strong>票价：</strong> 成人60元，学生30元</p>
      <p><strong>地址：</strong> 文化大道123号</p>

      <h3>订阅通讯</h3>
      <form>
        <input type="email" placeholder="您的邮箱地址" required>
        <button type="submit">订阅</button>
      </form>

      <h3>关注我们</h3>
      <ul>
        <li><a href="#">微信公众号</a></li>
        <li><a href="#">微博</a></li>
        <li><a href="#">抖音</a></li>
      </ul>
    </aside>
  </main>

  <!-- footer是HTML5语义标签，定义页面"底部区域"，通常包含版权信息、联系方式、免责声明等全局收尾内容 -->
  <footer>
    <p>&copy; 2023 城市博物馆 - 版权所有</p>
    <p>联系电话：010-12345678 | 邮箱：info@citymuseum.cn</p>
  </footer>
</body>
</html>